<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setLocale scope="session" value="${param['language']}" />
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <link rel="shortcut icon" href="./resources/images/ico.png" type="image/gif" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>BabelChat</title>
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- Le styles -->
        <link href="resources/css/prefs.css" rel="stylesheet">
        <link href="resources/css/design.css" rel="stylesheet">
        <link href="resources/css/estrutura.css" rel="stylesheet">
        <link href="./resources/css/bootstrap.css" rel="stylesheet">

        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>
        <style>
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
        <style type="text/css">
            .tab-pane fade{
                border: 1px;
            }
        </style>
        <link href="./resources/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- Le fav and touch icons -->
        <link rel="apple-touch-icon" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-114x114.png">
    </head>

    <body>
        <jsp:include page="header.jsp" flush="true"/>
        <!-- Parte de Login -->
        <div id="pag-home">
            <div class="home-gradient">
                <div class="home-bokeh">
                    <div class="home-centro">
                        <!--  Frase maior lado esquerdo - top-->
                        <div class="centro-lado-esquerdo">
                            <h1>Converse e faça<br>amizades com<br>pessoas do mundo inteiro!</h1>
                            <!-- BOTÕES DE REDES SOCIAIS --><br><br>
                            <div  class="pull-left" style="padding-top: 10px;">
                                <div style="display: inline; padding-right: 10px; max-height: 34px; max-width: 50px;"><g:plusone size="tall"></g:plusone></div>
                                <div style="display: inline;padding-right: 4px; max-height: 61px; max-width: 55px;"><fb:like href="http://www.facebook.com/apps/application.php?id=247146371975479" send="false" layout="box_count" width="50" show_faces="false"></fb:like></div>
                                <div style="display: inline;max-height: 55px; max-width: 40px;"><a style="display: inline" href="http://twitter.com/BabelChat" class="twitter-share-button" data-url="http://www.khondu.com/babelChat/" data-count="vertical">Tweet</a></div>
                            </div>
                            <div class="centro-frase pull-right" style="padding-right: 10px">
                                <!-- Frase maior lado esquerdo baixo-->

                                <div style=" height: 54px; width: 300px;"><fb:facepile href="http://www.facebook.com/apps/application.php?id=247146371975479" width="300" max_rows="1"></fb:facepile></div>
                                <!-- FRASE (desnecessária) <p style="padding-right: 1px;">Converse e compartilhe informações <br>com o mundo. Faça amigos em todos<br>os Continentes, em qualquer idioma!</p> -->
                            </div>
                            <!-- Botão lado esquerdo baixo - Leia Mias -->
                            <div class="amigos-incomum pull-left" id="amigos-incomum">
                            </div>
                        </div>
                        <!-- teste de login -->
                        <div class="hero-unit" style="padding-top: 50px; background-color: transparent;">
                            <fieldset>
                                <h2>Faça já novos amigos</h2>
                                <p>Crie sua conta ou faça login através do Facebook, Twitter, Google Plus ou Orkut.</p>
                                <label>Nome</label>
                                <input type="text" class="span3" placeholder="Digite como quer ser chamado…">
                                <label>Email</label>
                                <input type="text" class="span3" placeholder="Digite um e-mail válido…">
                                <label>Senha</label>
                                <input type="password" class="span3" placeholder="Digite sua senha…">
                                <label>Idioma</label>
                                <select id="language">
                                    <option>Escolha qual idioma você prefere</option>
                                    <option><fmt:message key="drop.ingles"/></option>
                                    <option><fmt:message key="drop.portugues"/></option>
                                    <option><fmt:message key="drop.espanhol"/></option>
                                    <option><fmt:message key="drop.italiano"/></option>
                                </select><!-- Meses -->
                                <div class="form-vertical">
                                    <select id="month" style="width:100px">
                                        <option>Janeiro</option>
                                        <option>Fevereiro</option>
                                        <option>etc</option>
                                        <option>etc</option>
                                        <option>etc</option>
                                        <option>etc</option>
                                        <option>etc</option>
                                        <option>etc</option>
                                        <option>Setembro</option>
                                        <option>Outubro</option>
                                        <option>Novembro</option>
                                        <option>Dezembro</option>
                                    </select><!-- Meses -->
                                    <select id="day" style="width: 50px">
                                        <% for (int i = 31; i > 0; i--) {
                                                        out.println("<option>" + i + "</option>");
                                                    }%>
                                    </select><!-- Dias(Sem Verificação ainda) -->
                                    <select id="year" style="width: 67px">
                                        <% for (int i = 2012; i > 1950; i--) {
                                                        out.println("<option>" + i + "</option>");
                                                    }%>
                                    </select><!-- Ano -->
                                    <br>
                                    <label class="checkbox">
                                        <input type="checkbox" style="margin-top: 10px"><strong style="color: #000">Concordo com os <a style="color: olivedrab" href="terms.jsp">termos</a><br> e com a nossa <a style="color: olivedrab" href="terms.jsp">Política de Privacidade</a></strong>
                                    </label>
                                    <div class="form-inline"><input type="button" class="btn btn-success btn-large" value="Inscrever-se"/>&nbsp;<input type="button" value="Login  »" class="btn btn-large btn-primary" data-controls-modal="windowLoginDialog" data-backdrop="true"/></div>
                                </div><!-- Form Vertical -->
                            </fieldset><!-- Fieldset de Cadastro -->
                        </div><!-- Fim do teste de Login -->
                    </div><!-- /home centro -->
                </div><!-- /home-bokeh -->
            </div><!-- home-gradient -->
        </div><!-- /pag-home -->
        <br>
        <div class="container">
            <br><br>
            <div class="form-inline"><!-- Salas -->
                <div class="span3" style="display: block">
                    <h2>Login</h2>
                    <div class="form-vertical">
                        <fieldset>
                            <h6>Entre e escolha uma sala!</h6>
                            <input type="text" class="xlarge" placeholder="Email…" />
                            <input type="password" class="xlarge" placeholder="Senha…" style="width: 150px;margin-top: 10px;"/>
                            <button class="btn btn-large btn-primary">Login</button>
                            <label class="checkbox" style="margin-left: 10px;">
                                <input type="checkbox"><strong style="color: #000"><span rel="tooltip" data-original-title="Não recomendado para computadores públicos">Salvar</span> &bull; <a style="color: olivedrab" href="recover.jsp">Esqueci minha Senha</a></strong>
                            </label>
                        </fieldset>
                    </div>
                </div><!--/login-->
                <div style="width: 60%;" class="inline pull-right">
                    <ul id="tab" class="nav nav-tabs">
                        <li class="active"><a href="#hot" data-toggle="tab">Popular</a></li>
                        <li class=""><a href="#recent" data-toggle="tab">Recente</a></li>
                        <li class=""><a href="#local" data-toggle="tab">Local</a></li>
                        <li class=""><a href="#music" data-toggle="tab">Música</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Idades <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class=""><a href="#dropdown1" data-toggle="tab">15 - 18</a></li>
                                <li class=""><a href="#dropdown2" data-toggle="tab">19 - 22</a></li>
                                <li class=""><a href="#dropdown3" data-toggle="tab">23 - 26</a></li>
                                <li class=""><a href="#dropdown4" data-toggle="tab">27 - 30</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Exclusivas <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class=""><a href="#homens" data-toggle="tab">Homens</a></li>
                                <li class=""><a href="#mulheres" data-toggle="tab">Mulheres</a></li>
                                <li class=""><a href="#mais30" data-toggle="tab">30+</a></li>
                                <li class=""><a href="#mais40" data-toggle="tab">40+</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Estilos <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class=""><a href="#dsamba" data-toggle="tab">Samba</a></li>
                                <li class=""><a href="#drock" data-toggle="tab">Rock</a></li>
                                <li class=""><a href="#dpop" data-toggle="tab">Pop</a></li>
                                <li class=""><a href="#dmetal" data-toggle="tab">Metal</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <h6 style="text-align: center">Salas mais comentadas</h6>
                        <table class="table table-striped" style="font-style:oblique;">
                            <tbody>
                                <tr>
                                    <td><a href="#" class="label label-info"> Geek (76)</a></td>
                                    <td><a href="#" class="label label-important">Harry (6)</a></td>
                                    <td><a href="#" class="label label-success"> Nerd (45)</a></td>
                                    <td><a href="#" class="label"> Futebol (34)</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#" class="label label-warning"> JavaScript (112)</a></td>
                                    <td><a href="#" class="label">.NeT (34)</a></td>
                                    <td><a href="#" class="label label-info"> Aventura (34)</a></td>
                                    <td><a href="#" class="label label-important"> PS3 (95)</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#" class="label label-info"> Xbox 360 (90)</a></td>
                                    <td><a href="#" class="label label-info">Pes 2012 (45)</a></td>
                                    <td><a href="#" class="label label-warning"> Casa (7)</a></td>
                                    <td><a href="#" class="label label-warning"> Comida (14)</a></td>
                                </tr>
                                <tr  style="border-bottom:1px solid #DDDDDD;">
                                    <td><a href="#" class="label"> IOS (12)</a></td>
                                    <td><a href="#" class="label label-important">Android (19)</a></td>
                                    <td><a href="#" class="label label-success"> Nerd (54)</a></td>
                                    <td><a href="#" class="label"> Piadas (3)</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <script type="text/javascript">
                    window.onload = function () {
                        $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
                            e.preventDefault()
                            $(this).tab('show')
                        })
                    }
                </script>
            </div><!-- /salas -->
        </div>
        <div class="container"> <hr>

            <div class="row-fluid" ><!-- div de "acessórios" -->
                <div class="span3">
                    <h2>Facebook</h2>
                    <div   style="width: 200px;height: 265px">
                        <fb:fan profile_id="247146371975479" stream="2" connections="6" width="200" height="400px"></fb:fan>
                    </div>
                </div><!--/facebook-->
                <div class="span3">
                    <h2>Twitter</h2>
                    <div style="width: 200px;height: 243px">
                        <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                        <script type="text/javascript">
                            function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://moopz.com/connect.php?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 200px; height: 400px; border: none; \"\>\<\/iframe\>';}</script>
                        <div id="twitterfanbox">
                            <script type="text/javascript">fanbox_init("BabelChat");</script>
                        </div>
                    </div>
                </div><!--/twitter-->
                <div class="span3">
                    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mais Acessados</h2>
                    <div style="font-size: 14; font-style: italic; margin-left: 40px;"><a class="label label-info">Filmes</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="label label-success">Outros</a>&nbsp;&nbsp;<a class="label label-important">Sports</a><br><a class="label label-info">Saúde</a>&nbsp;&nbsp;<a class="label">Lazer</a> <a class="label label-important">Comida</a><br>&nbsp;&nbsp;<a class="label label-success">Relacionamentos</a><br><a class="label label-info">Celebridades</a>&nbsp;&nbsp;<a class="label label-success">Games</a>&nbsp;&nbsp;<a class="label label-info">Família</a></div>
                </div><!--/hot topics-->
                <div class="span3">
                    <h2>Sobre</h2>
                    <p>No BabelChat você pode conversar e fazer amizade com pessoas de todos os lugares do mundo. Converse com chineses, italianos, russos e mais 35 idiomas, e veja tudo no idioma que quiser, simples assim.</p>
                    <p><a class="btn" href="http://twitter.github.com/bootstrap/examples/fluid.html#">View details »</a></p>
                </div> <!--/span-->
            </div>
            <br>
            <hr>
            <!-- DIV PARA APLICATIVOS -->
            <div class="span5 pull-left">
                <h2>Siga-nos</h2>
                <a href="index.jsp"><img width="32" height="32" alt="RSS feed icon" src="http://cdn.formspring.me/images/loggedout_home/follow-RSS-icon.png"></a>
                <a href="http://www.facebook.com/BabelChat.me"><img width="32" height="32" alt="facebook icon" src="http://cdn.formspring.me/images/loggedout_home/follow-facebook-icon.png"></a>
                <a href="http://twitter.com/babelchat"><img width="32" height="32" alt="twitter icon" src="http://cdn.formspring.me/images/loggedout_home/follow-twitter-icon.png"></a>
                <a href="https://plus.google.com/b/102646271620744112064/"><img width="32" height="32" src="resources/images/g+.png" alt="Google+ Icon"></a>

            </div>
            <div class="span5 pull-right" style="padding-left: 70px;">
                <h2>Babelchat para Android ou iPhone</h2>
                <img class="pull-left" style="margin-right: 10px" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/211162_247146371975479_1948621993_q.jpg" alt="BabelChat Icon" width="34px" height="34px"><p style="display: inline">Tenha acesso ao BabelChat aonde estiver, rápido, dinâmico, <br> intuitivo. Converse e faça amizades onde estiver.</p>
                <p style="padding-left: 30px"><a class="btn" style="margin-left: 15px;" href="http://twitter.github.com/bootstrap/examples/fluid.html#">Ir para a página do Aplicativo »</a> </p>
                <br>
            </div>
        </div><!--/container-->
        <jsp:include page="footer.jsp" flush="true"/>
    </body>
</html>